<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <script src="./axios.js"></script>
  </head>
  <body>
    <script>
      /* 
        1.axios拦截器 ：  拦截浏览器请求 与 服务器响应
        2. 请求拦截器 ： 发送请求之前执行的的回调函数
        3. 响应拦截器 ： 服务器响应之后执行的回调函数
        */

      // 添加请求拦截器
      axios.interceptors.request.use(
        function (config) {
          // 在发送请求之前做些什么
          /* 应用场景：添加默认请求参数 或 默认请求头(如token) */
          config.params = { num : 20 }
          return config
        },
        function (error) {
          // 对请求错误做些什么
          return Promise.reject(error)
        }
      )

      // 添加响应拦截器
      axios.interceptors.response.use(
        function (response) {
          // 对响应数据做点什么
          response.data.message = '我是响应拦截器添加的数据'
          return response
        },
        function (error) {
          // 对响应错误做点什么
          /* 场景：拦截服务器一些错误状态码 如果401 */

          return Promise.reject(error)
        }
      )

      axios({
          url:'https://autumnfish.cn/api/joke/list',
          method:'get',
          params: {num:10}
      }).then(res=>{
          //成功回调
          console.log(res)
      });
    </script>
  </body>
</html>
